<template>
  <canvas ref="canvasRef" width="400" height="400"></canvas>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getPoints } from "../utils/index.js";

// 获取引用
const canvasRef = ref(null);

// 在组件挂载后绘制图形
onMounted(() => {
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');

  // 绘制前 调整Canvas分辨率处理模糊问题
  const devicePixelRatio = window.devicePixelRatio || 1;
  console.log(">>>> window.devicePixelRatio >>>>", window.devicePixelRatio);
  canvas.width = canvas.offsetWidth * devicePixelRatio;
  canvas.height = canvas.offsetHeight * devicePixelRatio;
  ctx.scale(devicePixelRatio, devicePixelRatio);

  // 绘制第一环
  ctx.beginPath();
  ctx.arc(200, 200, 100, 0, 2 * Math.PI);
  ctx.strokeStyle = 'transparent';
  ctx.fillStyle = 'rgba(255, 119, 48, 0.1)';
  ctx.lineWidth = 1;
  ctx.fill();
  ctx.stroke();

  // 绘制第二环
  ctx.beginPath();
  ctx.arc(200, 200, 70, 0, 2 * Math.PI);
  ctx.fillStyle = 'rgba(255, 119, 48, 0.2)';
  ctx.lineWidth = 1;
  ctx.fill();
  ctx.stroke();

  // 绘制第三环
  ctx.beginPath();
  ctx.arc(200, 200, 40, 0, 2 * Math.PI);
  ctx.fillStyle = 'rgba(255, 119, 48, 0.2)';
  ctx.lineWidth = 1;
  ctx.fill();
  ctx.stroke();


  // 绘制标记点
  const points = [
    { x: 200, y: 200, radius: 3, color: 'rgba(255, 119, 48, 1)' },   // center
    { x: 300, y: 200, radius: 3, color: 'rgba(255, 119, 48, 1)', position: 'right' },
    { x: 270, y: 200, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // right mid
    { x: 240, y: 200, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // right low
    { x: 100, y: 200, radius: 3, color: 'rgba(255, 119, 48, 1)', position: 'left' },
    { x: 130, y: 200, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // left mid
    { x: 160, y: 200, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // left low
    { x: 200, y: 100, radius: 3, color: 'rgba(255, 119, 48, 1)', position: 'top' },
    { x: 200, y: 130, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // top mid
    { x: 200, y: 160, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // top low
    { x: 200, y: 300, radius: 4, color: 'rgba(255, 119, 48, 1)', position: 'bottom' },
    { x: 200, y: 270, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // bottom mid
    { x: 200, y: 240, radius: 2, color: 'rgba(255, 119, 48, 1)' },   // bottom low
  ];

  points.forEach((point) => {
    ctx.beginPath();
    ctx.arc(point.x, point.y, point.radius, 0, 2 * Math.PI);
    ctx.fillStyle = point.color;
    ctx.fill();
  });

  // 绘制轴
  const axis = [
    { x1: 100, y1: 200, x2: 300, y2: 200 },
    { x1: 200, y1: 100, x2: 200, y2: 300 },
  ];
  ctx.strokeStyle = 'rgba(255, 119, 48, 1)';
  ctx.lineWidth = 0.5;
  axis.forEach((line) => {
    ctx.beginPath();
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.fill();
    ctx.stroke();
  });

  // 绘制四边形 (顺序: 下右上左；上下、左右不能挨着)
  const rectPoints = ref([]);
  const data = ref([]);
  data.value = JSON.parse(window.localStorage.getItem("riskReportDrawInfo"));
  console.log(">>>> 雷达组件数据 >>>>", data.value);
  if (data.value) {
    console.log(">>>> 数据 >>>>", data.value);
    rectPoints.value = getPoints(data.value);
  }
  console.log(">>>> rectPoints.value >>>>", rectPoints.value);
  ctx.beginPath();
  ctx.moveTo(rectPoints.value[0][0], rectPoints.value[0][1]);
  for (let i = 1; i < rectPoints.value.length; i++) {
    const point = rectPoints.value[i];
    ctx.lineTo(point[0], point[1]);
  }
  ctx.closePath();
  ctx.strokeStyle = '#FF0000';
  ctx.fillStyle = 'rgba(224,32,32,0.40)';
  ctx.lineWidth = 1;
  ctx.fill();
  ctx.stroke();

  // 绘制文字
  points.forEach((point) => {
    ctx.beginPath();
    ctx.arc(point.x, point.y, point.radius, 0, 2 * Math.PI);
    ctx.fill();
    if (point.position) {
      const preStyle = ctx.fillStyle;
      ctx.font = '16px PingFangSC-Regula';
      ctx.fillStyle = 'rgba(0,0,0,0.4)'
      // 下方文字
      if (point.position === 'bottom') {
        const topTextX = point.x - 30;
        const topTextY = point.y + 25;
        if (data.value[0].title === '子女教育风险') {
          const topTextX = point.x - 45;
          const topTextY = point.y + 25;
          ctx.fillText('子女教育风险', topTextX, topTextY);
        } else {
          ctx.fillText(data.value[0].title, topTextX, topTextY);
        }
      }
      // 右方文字
      if (point.position === 'right') {
        const topTextX = point.x + 8;
        const topTextY = point.y + 5;
        if (data.value[1].title === '子女教育风险') {
          console.log(">>>> Hell888884o >>>>");
          const topTextX = point.x + 10;
          const topTextY = point.y - 5;
          ctx.fillText('子女教育', topTextX, topTextY);
          const riskTextX = point.x + 10;
          const riskTextY = point.y + 15;
          ctx.fillText('风险', riskTextX, riskTextY);
        } else {
          ctx.fillText(data.value[1].title, topTextX, topTextY);
        }
      }
      // 上方文字
      if (point.position === 'top') {
        const topTextX = point.x - 28;
        const topTextY = point.y - 12;
        if (data.value[2].title === '子女教育风险') {
          const topTextX = point.x - 48;
          const topTextY = point.y - 12;
          ctx.fillText('子女教育风险', topTextX, topTextY);
        } else {
          ctx.fillText(data.value[2].title, topTextX, topTextY);
        }
      }
      // 左方文字
      if (point.position === 'left') {
        const topTextX = point.x - 72;
        const topTextY = point.y + 5;
        if (data.value[3].title === '子女教育风险') {
          const topTextX = point.x - 72;
          const topTextY = point.y - 5;
          ctx.fillText('子女教育', topTextX, topTextY);
          const riskTextX = point.x - 40;
          const riskTextY = point.y + 15;
          ctx.fillText('风险', riskTextX, riskTextY);
        } else {
          ctx.fillText(data.value[3].title, topTextX, topTextY);
        }
      }
      ctx.fillStyle = preStyle;
    }
  });
});
</script>